<template>
    <!-- 学习页面 -->
    <div class="studyBox" style="padding-bottom:50px;">
        <!-- 个人信息 -->
        <div class="userInfo">
            <img src="../assets/images/bg06.png" class="userInfoBg"/>
            <div class="userhead_box">
                <p v-if="userInfo.largeAvatar!=''&&userInfo!=''">
                    <img :src="userInfo.largeAvatar" class="userhead"/>
                </p>
                <p v-if="userInfo.largeAvatar==''||userInfo==''">
                    <img src="../assets/images/avatar.png" class="userhead"/>
                </p>
                <div class="duration" style="display:none;">
                    <div class="fs_30">本周学习时长</div>
                    <div class="fs_24">
                        <span>56</span>小时
                    </div>
                </div>
            </div>
            <img src="../assets/images/img03.png" class="icons"/>
            <div class="date">
                <span>{{firstDayOfWeek}}</span>
                <span>~</span>
                <span>{{lastDayOfWeek}}</span>
            </div>
            <div class="studyDetails">
                <div class="studyDetailsTime">
                    <div class="fs_30">{{learningCourses}}</div>
                    <div class="fs_24 mtb_10">学习中</div>
                    <router-link to="/studying" class="lookBtn">去看看</router-link>
                </div>
                <div class="studyDetailsTime">
                    <div class="fs_30">{{learnedCourses}}</div>
                    <div class="fs_24 mtb_10">已学习</div>
                    <router-link to="/studied" class="lookBtn">去看看</router-link>
                </div>
                <div class="studyDetailsTime">
                    <div class="fs_30">{{collectNum}}</div>
                    <div class="fs_24 mtb_10">收藏</div>
                    <router-link to="/collect" class="lookBtn">去看看</router-link>
                </div>
            </div>
        </div>
        <div class="moduleTitle">我的学习</div>
        <!-- tab导航 -->
        <div class="navTabList">
            <tab :line-width="2" active-color="#1f7aff" v-model="tabIndex">
                <tab-item
                        class="vux-center"
                        v-for="(item, index) in listContent"
                        :key="index"
                >{{item.title}}
                </tab-item>
            </tab>
            <div class="filterBox" afterColor :class="filterStatus? 'afterColor':'beforeColor'"
                 @click="filterStatus=!filterStatus"
            >
                <img v-if="!filterStatus" src="../assets/images/filter01.png" alt class="filter"/>
                <img v-if="filterStatus" src="../assets/images/filter02.png" alt class="filter"/>
                筛选
            </div>
        </div>
        <!-- 筛选菜单 -->
        <div v-show="filterStatus" ref="filterPage" class="filterMask"></div>
        <div v-if="filterStatus" class="popFilter">
            <div class="filterTitle">课程筛选</div>
            <div class="filterLabels">
                <div class="filterLabel" @click="onFilterLabel">学习中</div>
                <div class="filterLabel" @click="onFilterLabel">已完成</div>
                <div class="filterLabel" @click="onFilterLabel">收藏</div>
            </div>
        </div>
        <!-- 内容板块 -->
        <swiper
                v-model="tabIndex"
                :show-dots="false"
                ref="cateSwiper"
                :min-moving-distance="100"
                @on-get-height="getPageHeight"
        >
            <swiper-item v-for="(val, num) in listContent" :key="num">
                <div v-if="val.title=='课程'">
                    <div v-for="(item, index) in myCourseList">
                        <router-link class="item-ansBox" :to="{name:'courseDetails-buy',query:{id:item.id}}">
                            <div class="item-ans">
                                <div class="courseImg" v-if="item.largePicture !=''">
                                    <img class="img" :src="item.largePicture"/>
                                </div>
                                <div class="courseImg" v-if="item.largePicture ==''">
                                    <img class="img" src="../assets/images/courseSet.png"/>
                                </div>
                                <div class="hotCourseInfo">
                                    <div class="hotCourseInfo_title">{{item.title}}</div>
                                    <div class="hotCourseInfo_count">讲师：{{item.userName}}</div>
                                    <div class="flex_sb">
                                        <div class="fs_26">
                                            课时
                                            <span class="color_gray9">{{item.lessonNum}}节</span>
                                        </div>
                                        <div>
                                            <div v-if="item.percent== 100? false : true"
                                                 class="fs_24 color_gray9"
                                            >{{item.percent}}%
                                            </div>
                                            <img v-if="item.percent== 100? true : false"
                                                 src="../assets/images/tick.png"
                                                 alt
                                                 class="tick"
                                            />
                                        </div>
                                    </div>
                                    <x-progress
                                            :percent=" parseInt(item.percent)"
                                            :show-cancel="false"
                                            class="progressBox"
                                    ></x-progress>
                                </div>
                            </div>
                        </router-link>
                    </div>
                </div>
                <div v-if="val.title=='班级'">
                    <div v-for="(item, index) in myClassList" class="classBox">
                        <router-link :to="{name:'classCourse',query:{id:item.classRoomId}}">
                            <div class="classInfos">
                                <img :src="item.largePicture"/>
                                <div class="classInfo">
                                    <div class="fs_26">
                                        {{item.title}}
                                        <span
                                                :class="true? 'color_orange2':'color_blue'"
                                        >({{true? '进行中':'已完结'}})</span>
                                    </div>
                                    <!--                <div class="fs_26">班主任：{{item.teacher}}</div>-->
                                    <div class="fs_26 color_orange2">总成员：{{item.studentsNum}}人</div>
                                </div>
                            </div>

                            <div class="classItem">
                                <div>课程：{{item.coursesNum}}</div>
                                <div>话题：{{item.topicNum}}</div>
                                <div>笔记：{{item.noteNum}}</div>
                            </div>
                            <div class="bottomLine"></div>
                        </router-link>
                    </div>
                </div>
                <div v-if="val.title=='直播'" class="coursesBox">
                    <div class="evaList" v-if="myLiveCourseList.length==0">暂无数据</div>
                    <div v-for="(item, index) in myLiveCourseList" :key="index" class="courses">
                        <router-link :to="{name:'courseDetails-buy',query:{id:item.courseId}}">
                            <div class="posi_rela">
                                <div v-if="item.largePicture !=''">
                                    <img :src="item.largePicture" class="courseBg"/>
                                </div>
                                <div v-if="item.largePicture ==''">
                                    <img class="courseBg" src="../assets/images/courseSet.png"/>
                                </div>
                                <div class="teacherInfo">
                                    <div class="posi_rela flex">
                                        <img src="../assets/images/bg02.png" class="nameLabel"/>
                                        <span class="teacherName">{{item.nickName}}老师</span>
                                        <p v-if="item.largeAvatar !=''">
                                            <img :src="item.largeAvatar" class="teacherHead"/>
                                        </p>
                                        <p v-if="item.largeAvatar ==''">
                                            <img class="teacherHead" src="../assets/images/avatar.png"/>
                                        </p>
                                    </div>
                                </div>
                                <div class="courseState">
                                    <div class="posi_rela">
                                        <img v-if="item.status=='直播中'" src="../assets/images/bg03.png" class="stateBg"/>
                                        <img v-if="item.status=='未开播'" src="../assets/images/bg04.png" class="stateBg"/>
                                        <img v-if="item.status=='回放'" src="../assets/images/bg05.png" class="stateBg"/>
                                        <img
                                                v-if="item.status=='直播中'"
                                                src="../assets/images/icon01.png"
                                                class="stateIcon"
                                        />
                                        <img
                                                v-if="item.status=='未开播'"
                                                src="../assets/images/icon02.png"
                                                class="stateIcon"
                                        />
                                        <img
                                                v-if="item.status=='回放'"
                                                src="../assets/images/icon03.png"
                                                class="stateIcon"
                                        />
                                        <span
                                                class="stateTxt"
                                        >{{item.status=='直播中'?'直播中':item.status=='未开播'?'未开播':'回放'}}</span>
                                    </div>
                                </div>
                                <div class="liveTips">{{item.studentNum}}人学习中</div>
                            </div>
                            <div class="courseInfo">
                                <div class="courseTitle">{{item.title}}</div>
                                <div class="coursePrice">
                                    <div class="fs_20">
                                        {{item.lessonNum}}课时
                                        <!-- <text class=''>￥199.9</text> -->
                                    </div>
                                    <div class="courseEva fs_20">
                                        <img src="../assets/images/more.png"/>
                                        评价{{item.reviewNum}}
                                    </div>
                                </div>
                            </div>
                        </router-link>
                    </div>
                </div>
                <div v-if="val.title=='笔记'" style="display: none">
                    <div v-for="(item, index) in StudyNoteList" :key="index">
                        <div class="foldBox">
                            <div class="foldTitleBox" @click="panel(index)">
                                <img src="../assets/images/bg07.png"/>
                                <div class="foldTitleName">{{item.title}}</div>
                                <div class="foldRightData">
                                    <span>全部 {{item.noteNum}}</span>
                                    <img v-if="showIndex == index" src="../assets/images/down01.png" alt/>
                                    <img v-if="showIndex !== index" src="../assets/images/more01.png" alt/>
                                </div>
                            </div>
                            <div v-for="(foldMenu,index2) in StudyNoteList" :key="index2" @click="panel2(index2)">
                                <div class="foldTitleBox2" v-if="showIndex == index">
                                    <div class="fs_28">{{foldMenu.title}}</div>
                                    <div>
                                        <span class="fs_24">{{foldMenu.time}}</span>
                                        <img v-if="showIndex2 == index2" src="../assets/images/down02.png" alt/>
                                        <img v-if="showIndex2 !== index2" src="../assets/images/more02.png" alt/>
                                    </div>
                                </div>
                                <div class="detailBox" v-if="showIndex == index&&showIndex2 == index2">
                                    <div v-html="foldMenu.content"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="val.title=='作业'">
                    <router-link to v-for="(item, index) in val.innerList" :key="index" class="examBox">
                        <div class="dateClass">
                            <div class="dates flex">
                                <img v-if="item.status=='已批阅'" src="../assets/images/state02.png"/>
                                <img v-if="item.status=='批阅中'" src="../assets/images/state01.png"/>
                                <span style="font-size：16px">{{item.time}}</span>
                            </div>
                            <div class="className">{{item.class}}</div>
                        </div>
                        <div
                                :class="parseInt(item.score)>=60?'mark_green':'mark_red'"
                                class="unshow"
                        >{{item.score}}分
                        </div>
                        <div class="examInfo">
                            <div>{{item.title}}</div>
                            <div class="subjectNum">
                                做对{{item.right}}题
                                <span>/共{{item.totle}}题</span>
                            </div>
                        </div>
                        <x-icon type="ios-arrow-right" size="26" class="examMore"></x-icon>
                    </router-link>
                </div>
                <div v-if="val.title=='考试'">
                    <router-link to v-for="(item, index) in val.innerList" :key="index" class="examBox">
                        <div class="dateClass">
                            <div class="dates flex">
                                <img v-if="item.status=='已批阅'" src="../assets/images/state02.png"/>
                                <img v-if="item.status=='批阅中'" src="../assets/images/state01.png"/>
                                <span style="font-size：16px">{{item.time}}</span>
                            </div>
                            <div class="className">{{item.class}}</div>
                        </div>
                        <div :class="parseInt(item.score)>=60?'mark_green':'mark_red'">{{item.score}}分</div>
                        <div class="examInfo">
                            <div>{{item.title}}</div>
                            <div class="subjectNum">
                                做对{{item.right}}题
                                <span>/共{{item.totle}}题</span>
                            </div>
                        </div>
                        <x-icon type="ios-arrow-right" size="26" class="examMore"></x-icon>
                    </router-link>
                </div>
            </swiper-item>
        </swiper>
        <TabBar></TabBar>
    </div>
</template>

<script>
    import {Swiper, SwiperItem, XProgress, Tab, TabItem} from 'vux'
    import TabBar from '../components/tabBar'
    import {
        MyCourse,
        MyClass,
        MyLiveCourse,
        MyStudyNote,
        MyLearningRecord
    } from '@/api/index/study'
    import store from '../store/store'

    export default {
        components: {
            TabBar,
            XProgress,
            Swiper,
            SwiperItem,
            Tab,
            TabItem
        },
        data() {
            return {
                tabIndex: 0,
                myCourseList: [],
                myClassList: [],
                StudyNoteList: [],
                myLiveCourseList: [],
                filterStatus: false,
                userInfo: '',
                learnedCourses: 0,
                learningCourses: 0,
                collectNum: 0,
                showIndex: -1,
                showIndex2: -1,
                // 软件列表数据
                listContent: [
                    {
                        title: '课程',
                        innerList: [
                            {
                                courseImg: require('../assets/images/img02.png'),
                                hotCourseInfo_title: '爱语文，做有修养的人',
                                teacher: '林岳峰',
                                hourNum: '26',
                                percent: '60'
                            },
                            {
                                courseImg: require('../assets/images/img02.png'),
                                hotCourseInfo_title: '爱语文，做有修养的人',
                                teacher: '林岳峰',
                                hourNum: '26',
                                percent: '30'
                            },
                            {
                                courseImg: require('../assets/images/img02.png'),
                                hotCourseInfo_title: '爱语文，做有修养的人',
                                teacher: '林岳峰',
                                hourNum: '26',
                                percent: '100'
                            },
                            {
                                courseImg: require('../assets/images/img02.png'),
                                hotCourseInfo_title: '爱语文，做有修养的人',
                                teacher: '林岳峰',
                                hourNum: '26',
                                percent: '50'
                            }
                        ]
                    },
                    {
                        title: '班级',
                        innerList: [
                            {
                                classImg: require('../assets/images/head06.png'),
                                className: '一年级英语',
                                classNum: '一班',
                                stateColor: true,
                                state: true,
                                teacher: '成然',
                                num: '28',
                                course: '4',
                                topic: '2',
                                note: '4'
                            },
                            {
                                classImg: require('../assets/images/head06.png'),
                                className: '一年级英语',
                                classNum: '一班',
                                stateColor: false,
                                state: false,
                                teacher: '成然',
                                num: '28',
                                course: '4',
                                topic: '2',
                                note: '4'
                            },
                            {
                                classImg: require('../assets/images/head06.png'),
                                className: '一年级英语',
                                classNum: '一班',
                                stateColor: true,
                                state: true,
                                teacher: '成然',
                                num: '28',
                                course: '4',
                                topic: '2',
                                note: '4'
                            },
                            {
                                classImg: require('../assets/images/head06.png'),
                                className: '一年级英语',
                                classNum: '一班',
                                stateColor: false,
                                state: false,
                                teacher: '成然',
                                num: '28',
                                course: '4',
                                topic: '2',
                                note: '4'
                            }
                        ]
                    },
                    {
                        title: '直播',
                        innerList: [
                            {
                                status: '直播中',
                                title: '晓波老师口语生活体验课',
                                classHour: '23',
                                evaluate: '3210',
                                studyNum: '2332',
                                teacher: '侯小波',
                                teacherImg: require('../assets/images/head01.png'),
                                bgImg: require('../assets/images/img01.png')
                            },
                            {
                                status: '未开播',
                                title: '晓波老师口语生活体验课',
                                classHour: '23',
                                evaluate: '3210',
                                studyNum: '2332',
                                teacher: '侯小波',
                                teacherImg: require('../assets/images/head01.png'),
                                bgImg: require('../assets/images/img01.png')
                            },
                            {
                                status: '回放',
                                title: '晓波老师口语生活体验课',
                                classHour: '23',
                                evaluate: '3210',
                                studyNum: '2332',
                                teacher: '侯小波',
                                teacherImg: require('../assets/images/head01.png'),
                                bgImg: require('../assets/images/img01.png')
                            }
                        ]
                    },
                    // {
                    //     title: '笔记',
                    //     innerList: [
                    //         {
                    //             foldTitleBg: require('../assets/images/bg07.png'),
                    //             foldTitle: '一年级英语课程',
                    //             foldNum: '4',
                    //             foldMenu: [
                    //                 {
                    //                     foldTitle: '一年级英语课程-第一节',
                    //                     time: '16:41',
                    //                     detail: [
                    //                         {
                    //                             foldDetail: '1)单词名词形容词'
                    //                         },
                    //                         {
                    //                             foldDetail: '2)单词名词形容词'
                    //                         }
                    //                     ]
                    //                 }
                    //             ]
                    //         },
                    //         {
                    //             foldTitleBg: require('../assets/images/bg07.png'),
                    //             foldTitle: '一年级英语课程',
                    //             foldNum: '4',
                    //             foldMenu: [
                    //                 {
                    //                     foldTitle: '一年级英语课程-第一节',
                    //                     time: '16:41',
                    //                     detail: [
                    //                         {
                    //                             foldDetail: '1)单词名词形容词'
                    //                         },
                    //                         {
                    //                             foldDetail: '2)单词名词形容词'
                    //                         }
                    //                     ]
                    //                 }
                    //             ]
                    //         }
                    //     ]
                    // }
                ],
                firstDayOfWeek:'',
                lastDayOfWeek:'',
            }
        },
        mounted() {
            console.log(this.$store.state.user.name);
            console.log(this.$store.state.user.id);
            console.log(this.$store.state.user.tenantId);
            MyCourse(this.$store.state.user.id)
                .then(res => {
                    console.log(res.data.data);
                    this.myCourseList = res.data.data.list
                })
                .catch(err => {
                    console.log(err)
                });
            MyClass(this.$store.state.user.id)
                .then(res => {
                    console.log(res.data.data);
                    this.myClassList = res.data.data.list
                })
                .catch(err => {
                    console.log(err)
                });

            MyLiveCourse(this.$store.state.user.id)
                .then(res => {
                    console.log(res.data.data);
                    this.myLiveCourseList = res.data.data.StudyLiveList
                })
                .catch(err => {
                    console.log(err)
                });
            MyStudyNote(this.$store.state.user.id)
                .then(res => {
                    console.log(res.data.data);
                    this.StudyNoteList = res.data.data.StudyNoteList
                })
                .catch(err => {
                    console.log(err)
                });
            MyLearningRecord(this.$store.state.user.id).then(res => {
                console.log(res.data.data);
                this.userInfo = res.data.data.userInfo;
                this.learnedCourses = res.data.data.learnedCourses;
                this.learningCourses = res.data.data.learningCourses;
                this.collectNum = res.data.data.collectNum;
                this.firstDayOfWeek = res.data.data.firstDayOfWeek;
                this.lastDayOfWeek = res.data.data.lastDayOfWeek;
            }).catch(err => {
                console.log(err)
            });
            this.getFilterHeight()
        },
        methods: {
            // 一级折叠面板
            panel(index) {
                if (index != this.showIndex) {
                    this.showIndex = index
                } else {
                    this.showIndex = -1
                }
            },
            // 二级级折叠面板
            panel2(index) {
                if (index != this.showIndex2) {
                    this.showIndex2 = index
                } else {
                    this.showIndex2 = -1
                }
            },
            onFilterLabel() {
                this.filterStatus = !this.filterStatus
            },
            getFilterHeight() {
                let topHeight = document.getElementsByClassName('vux-slider')[0].offsetTop
                let bottomHeight = document.getElementsByClassName('tabbarBox')[0]
                        .offsetTop,
                    diffHeight = window.screen.height - 140
                this.$nextTick(() => {
                    this.$refs.filterPage.style.top = topHeight + 'px'
                    this.$refs.filterPage.style.height = bottomHeight - 80 + 'px'
                    console.log(this.$refs)
                    console.log(topHeight, bottomHeight)
                })
                // console.log(topHeight, diffHeight, this.$refs.cateSwiper.xheight)
            },
            getPageHeight() {
                let topHeight = document.getElementsByClassName('vux-slider')[0]
                        .offsetTop,
                    diffHeight = window.screen.height - 140
                this.$nextTick(() => {
                    this.$refs.cateSwiper.xheight = diffHeight + 'px'
                })
                // console.log(topHeight, diffHeight, this.$refs.cateSwiper.xheight)
            }
        }
    }
</script>

<style lang="less" scoped>
    .studyBox {
        a {
            color: currentColor;
        }

        // 用户信息
        .userInfo {
            padding: 15px 20px;
            background: #fff;
            position: relative;

            .userInfoBg {
                width: 100%;
                height: 383px;
            }

            .userhead_box {
                position: absolute;
                top: 45px;
                left: 55px;
                display: flex;
            }

            .userhead {
                width: 80px;
                height: 80px;
            }

            .icons {
                position: absolute;
                top: 60px;
                right: 65px;
                width: 178px;
                height: 67px;
            }

            .duration {
                color: #fff;
                margin-left: 20px;
            }

            .date {
                position: absolute;
                top: 150px;
                left: 274px;
                font-size: 24px;
                color: #fff;
            }

            .studyDetails {
                position: absolute;
                bottom: 60px;
                left: 32px;
                right: 32px;
                display: flex;
                color: #fff;
            }

            .studyDetailsTime {
                flex: 1;
                text-align: center;
            }

            .lookBtn {
                color: currentColor;
                margin-top: 10px;
                font-size: 24px;
                background: none;
                border: 2px solid #eee;
                display: inline-block;
                padding: 2px 30px;
                border-radius: 20px;
                opacity: 1;
            }
        }

        // 我的学习
        .moduleTitle {
            padding: 20px;
            font-size: 30px;
            font-weight: 600;
        }

        /* 筛选按钮 */

        .filterMask {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 2;
        }

        .popFilter {
            position: absolute;
            left: 0;
            right: 0;
            background: #fff;
            z-index: 2;
            padding: 20px 30px;

            .filterTitle {
                font-size: 26px;
                color: #626262;
            }

            .filterLabels {
                display: flex;
                margin-top: 20px;
            }

            .filterLabel {
                background: #f1f1f1;
                font-size: 26px;
                color: #626262;
                padding: 15px 40px;
                margin-right: 20px;
            }
        }

        // tab导航
        .navTabList {
            position: relative;
            border-top: 2px solid #e9e9e9;

            /deep/ .vux-tab-container {
                padding-right: 120px;
            }

            .filterBox {
                position: absolute;
                top: 1px;
                bottom: 0px;
                right: 0;
                box-shadow: -10px 0 10px #f3f3f3;
                font-size: 24px;
                line-height: 80px;
                width: 120px;
                text-align: center;
                border-bottom: 1px solid #e9e9e9;

                .filter {
                    width: 22px;
                    height: 22px;
                    vertical-align: middle;
                }
            }

            .beforeColor {
                color: #2f97ff;
                background: #fff;
            }

            .afterColor {
                color: #fff;
                background: #2f97ff;
            }
        }

        /deep/ .vux-slider {
            .vux-swiper {
                overflow-y: auto;
            }
        }

        .item-ansBox {
            color: currentColor;
            // 课程
            .item-ans {
                width: 100%;
                display: flex;
                padding: 30px;
                box-sizing: border-box;

                /deep/ .progressBox {
                    border-radius: 20px;

                    .weui-progress__bar {
                        border-radius: 20px;
                        height: 10px;

                        .weui-progress__inner-bar {
                            border-radius: 20px;
                            background-color: #1f7aff;
                        }
                    }
                }

                .courseImg {
                    flex: 1;
                }

                .courseImg img {
                    width: 312px;
                    height: 182px;
                    display: block;
                }

                .hotCourseInfo {
                    flex: 1;
                    overflow: hidden;
                }

                .hotCourseInfo_title {
                    font-size: 30px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }

                .hotCourseInfo_count {
                    font-size: 24px;
                    margin-bottom: 20px;
                    color: #f88c0f;
                    margin-top: 10px;
                }

                .price_now {
                    color: #f14927;
                    font-size: 36px;
                }

                .price_before {
                    font-size: 22px;
                    color: #a5a5a5;
                    text-decoration: line-through;
                }

                .hotCourseInfo_tips {
                    font-size: 24px;
                    color: #b48a59;
                    margin-left: 24px;
                }

                .tick {
                    width: 22px;
                    height: 22px;
                }
            }
        }

        /* 班级 */

        .classBox {
            .classInfos {
                margin: 30px;
                display: flex;
            }

            .classInfos img {
                width: 135px;
                height: 135px;
                border-radius: 50%;
            }

            .classInfo {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 5px 0;
                margin-left: 40px;
            }

            .classItem {
                display: flex;
                margin-bottom: 20px;
            }

            .classItem div {
                flex: 1;
                text-align: center;
                font-size: 28px;
            }

            .classItem div:not(:first-child) {
                border-left: 1px solid #f1f2f3;
            }

            .bottomLine {
                border-bottom: 2px solid #eee;
            }

            .color_orange2 {
                color: #fda203;
            }

            .color_blue {
                color: #2873f3;
            }
        }

        /* 直播 */

        .coursesBox {
            padding: 20px;

            .courses {
                display: inline-block;
                margin-bottom: 30px;
                width: 47%;
            }

            .courses:nth-child(odd) {
                margin-right: 42px;
            }

            .posi_rela {
                position: relative;
            }

            .posi_rela .courseBg {
                display: block;
                width: 100%;
                height: 220px;
            }

            .teacherInfo {
                position: absolute;
                top: 26px;
                left: 0;
            }

            .nameLabel {
                width: 160px;
                height: 60px;
            }

            .teacherName {
                position: absolute;
                top: 10px;
                left: 10px;
                font-size: 20px;
                color: #fff;
                opacity: 0.9;
            }

            .teacherHead {
                width: 58px;
                height: 60px;
                margin-left: -20px;
                border-radius: 50%;
            }

            .courseState {
                position: absolute;
                bottom: -4px;
                left: 4px;
            }

            .stateBg {
                width: 130px;
                height: 36px;
            }

            .stateIcon {
                position: absolute;
                top: 12px;
                left: 6px;
                bottom: 0;
                width: 16px;
                height: 16px;
            }

            .stateTxt {
                position: absolute;
                top: 0px;
                left: 34px;
                opacity: 0.8;
                font-size: 18px;
                color: #fff;
            }

            .liveTips {
                position: absolute;
                bottom: 6px;
                left: 140px;
                font-size: 22px;
                color: #fff;
                background: rgba(0, 0, 0, 0.2);
                padding: 0px 4px;
                border-radius: 5px;
            }

            .courseInfo {
                background: #fff;
                border-radius: 0 0 16px 16px;
                padding: 10px;
                box-shadow: 0 0 10px 5px #ddd;
            }

            .courseTitle {
                font-size: 22px;
            }

            .coursePrice {
                display: flex;
                justify-content: space-between;
                margin-top: 10px;
            }

            .courseEva {
                display: flex;
                align-items: center;
            }

            .courseEva img {
                width: 20px;
                height: 20px;
                margin-right: 10px;
            }
        }

        /* 笔记 */

        .foldBox {
            margin: 20px 30px;
            box-shadow: 0 0 10px 5px #eee;
            border-radius: 5px;

            .foldTitleBox {
                position: relative;
            }

            .foldTitleBox > img {
                width: 690px;
                height: 120px;
                display: block;
            }

            .foldTitleName {
                font-size: 34px;
                color: #fff;
                position: absolute;
                top: 35px;
                left: 30px;
                white-space: nowrap;
                width: 70%;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .foldRightData {
                position: absolute;
                top: 40px;
                right: 30px;
            }

            .foldRightData span {
                font-size: 28px;
                color: #fff;
                margin-right: 20px;
            }

            .foldRightData img {
                width: 26px;
                height: 26px;
            }

            .foldTitleBox2 {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 30px;
                line-height: 2.5;
            }

            .foldTitleBox2 img {
                width: 36px;
                height: 36px;
                vertical-align: middle;
                margin-left: 20px;
            }

            .detailBox {
                margin: 0 30px;
                padding: 10px 20px;
                background: #f8f9fa;
                border-radius: 5px;
            }

            .detailBox div {
                font-size: 22px;
                color: #606265;
                line-height: 2;
            }
        }

        /* 考试 */

        .examBox {
            color: currentColor;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 30px;
            padding: 10px 30px;
            box-shadow: 0 0 20px 5px #f6f6f6;

            .dateClass {
                line-height: 2;
            }

            .dateClass .dates img {
                width: 40px;
                height: 40px;
                vertical-align: middle;
                margin-right: 10px;
            }

            .className {
                font-size: 30px;
                color: #999;
            }

            .unshow {
                // margin: 0 20px;
                width: 80px;
                display: block;
                text-align: center;
                visibility: hidden;
            }

            .mark_green {
                color: #1ec75e;
            }

            .mark_red {
                color: #fd2342;
            }

            .examInfo {
                font-size: 30px;
                line-height: 2;
            }

            .subjectNum span {
                color: #999;
            }

            .examMore {
                fill: currentColor;
            }
        }
    }
</style>